<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加字段</title>
</head>
<body>
<script type="text/html" id="form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基础设置</li>
                    <li>表单元素</li>
                    <li>关联模型</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <div class="layui-form-item" style="margin-bottom:5px;">
                                <label class="layui-form-label">
                                    <text style="color:red;">*</text>
                                    所属表</label>
                                <div class="layui-input-block">
                                    <div class="xmSelect"
                                         data-name="table_id"
                                         data-sourceType="route"
                                         data-source="/plugin/curd/curd.table/index"
                                         data-paging="true"
                                         data-radio="true"
                                         data-textField="table"
                                         data-subTextField="comment"
                                         data-valueField="id"
                                         data-selected="{{d.table_id}}"
                                         data-onchange="setTableId"
                                    ></div>
                                </div>
                            </div>

                            <div class="layui-form-item" style="margin-bottom:5px;">
                                <div class="layui-row">
                                    <div class="layui-col-lg6 layui-col-md6 layui-col-sm6">
                                        <label class="layui-form-label">
                                            <text style="color:red;">*</text>
                                            字段名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="field" placeholder="请输入字段名称" class="layui-input"
                                                   lay-verify="required"
                                                   autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="layui-col-lg6 layui-col-md6 layui-col-sm6">
                                        <label class="layui-form-label">
                                            <text style="color:red;">*</text>
                                            字段注释</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="comment" placeholder="请输入字段注释" class="layui-input"
                                                   lay-verify="required"
                                                   autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label">
                                        <text style="color:red;">*</text>
                                        存储类型</label>
                                    <div class="layui-input-block">
                                        <select name="data_type" class="layui-select" lay-verify="required"
                                                lay-filter="select-data-type" lay-search="true">
                                            <option value="">请选择存储类型</option>
                                            <option value="integer">integer</option>
                                            <option value="biginteger">biginteger</option>
                                            <option value="boolean">boolean(tinyint)</option>
                                            <option value="date">date</option>
                                            <option value="datetime">datetime</option>
                                            <option value="decimal">decimal</option>
                                            <option value="float">float</option>
                                            <option value="string">string</option>
                                            <option value="text">text</option>
                                            <option value="time">time</option>
                                            <option value="timestamp">timestamp</option>
                                            <option value="uuid">uuid</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline" id="lengthDiv">
                                    <label class="layui-form-label">
                                        <text style="color:red;">*</text>
                                        存储长度</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="limit" placeholder="请输入字段长度" class="layui-input"
                                               lay-verify="required"
                                               autocomplete="off">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline" id="precisionDiv" style="display:none;">
                                    <label class="layui-form-label">
                                        <text style="color:red;">*</text>
                                        整数长度</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="precision" placeholder="请输入整数部分长度" value="11"
                                               class="layui-input"
                                               lay-verify="required"
                                               autocomplete="off">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline" id="scaleDiv" style="display:none;">
                                    <label class="layui-form-label">
                                        保留小数位</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="scale" placeholder="请输入保留小数位" value="2"
                                               class="layui-input"
                                               autocomplete="off">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item" style="margin-bottom:5px;" id="defaultVal">
                                <label class="layui-form-label">
                                    默认值</label>
                                <div class="layui-input-block">
                                    <input type="text" name="default" placeholder="请输入字段默认值"
                                           class="layui-input"
                                           autocomplete="off">
                                </div>
                            </div>

                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label" title="允许为空">
                                    允许为空</label>
                                <div class="layui-input-block">
                                    <input type="hidden" name="is_empty" value="2" />
                                    <input type="checkbox" checked="checked" name="is_empty" id="is_empty" value="1"
                                           title="允许"/>
                                </div>
                            </div>

                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label" title="表头排序">
                                    表头排序</label>
                                <div class="layui-input-block">
                                    <input type="hidden" name="is_thead_sort" value="2" />
                                    <input type="checkbox" name="is_thead_sort"
                                           id="is_thead_sort"
                                           value="1"
                                           title="表头排序"/>
                                </div>
                            </div>

                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label" title="默认排序">
                                    默认排序</label>
                                <div class="layui-input-block">
                                    <select class="layui-select" name="default_select_sort">
                                        <option value="">不设置</option>
                                        <option value="asc">ASC</option>
                                        <option value="desc">DESC</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label" title="显示位置">
                                    显示位置</label>
                                <div class="layui-input-block">
                                    <input type="hidden" name="search_show" value="2" />
                                    <input type="checkbox" checked="checked" name="search_show" id="search_show" value="1"
                                           title="搜索表单"/>
                                    <input type="hidden" name="table_show" value="2" />
                                    <input type="checkbox" checked="checked" name="table_show" id="table_show" value="1"
                                           title="数据列表"/>
                                    <input type="hidden" name="add_show" value="2" />
                                    <input type="checkbox" checked="checked" name="add_show" id="add_show" value="1"
                                           title="添加表单"/>
                                    <input type="hidden" name="edit_show" value="2" />
                                    <input type="checkbox" checked="checked" name="edit_show" id="edit_show" value="1"
                                           title="编辑表单"/>
                                </div>
                            </div>

                            <div class="layui-form-item" style="margin-bottom:5px;">
                                <label class="layui-form-label" title="搜索表单，数据列表，添加表单，编辑表单等显示排序">
                                    显示排序</label>
                                <div class="layui-input-block">
                                    <input type="text" name="show_sort" placeholder="请输入数字，倒序生成字段在数据库和表单中的位置" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label" title="数据表格，当前字段的宽度，单位px，默认80，此处输入整数即可">
                                    列宽</label>
                                <div class="layui-input-block">
                                    <input type="text" name="cell_width" placeholder="数据表格，当前字段的宽度，单位px，默认80，此处输入整数即可"
                                           class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <text style="color:red;">*</text>
                                表单元素</label>
                            <div class="layui-input-block">
                                <div class="xmSelect"
                                     data-name="form_type"
                                     data-source='[{"name":"单行文本输入框","value":"input"},{"name":"密码输入框","value":"password"},{"name":"当前后台管理员ID","value":"admin_user_id"},{"name":"普通文本域","value":"textarea"},{"name":"单选按钮","value":"radio"},{"name":"开关单选","value":"switch"},{"name":"复选框","value":"checkbox"},{"name":"普通单选下拉框","value":"select"},{"name":"xm-select下拉框","value":"xm_select"},{"name":"xm-select联动下拉框","value":"linkage_xm_select"},{"name":"时间选择器","value":"laydate"},{"name":"颜色选择器","value":"color_picker"},{"name":"上传控件","value":"upload"},{"name":"富文本编辑器","value":"editor"}]'
                                     data-subTextField="value"
                                     data-valueField="value"
                                     data-layVerify="required"
                                     data-radio="true"
                                     data-placeholder="请选择表单元素"
                                     data-onchange="formTypeChange"
                                ></div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" title="附加设置">
                                <text style="color:red;">*</text>
                                附加设置</label>
                            <div class="layui-input-block" id="addition">
                                <div style="padding: 9px 5px;">请先选择表单元素</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                关联表</label>
                            <div class="layui-input-block">
                                <div class="xmSelect"
                                     data-name="relation[table]"
                                     data-sourceType="route"
                                     data-source="/plugin/curd/curd/getTableList"
                                     data-textField="title"
                                     data-valueField="title"
                                     data-radio="true"
                                     data-placeholder="请选择关联表"
                                     data-onchange="relationTableChange"
                                ></div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <text style="color:red;">*</text>
                                关联方式</label>
                            <div class="layui-input-block">
                                <select class="layui-select" name="relation[type]">
                                    <option value="belongsTo">belongsTo</option>
                                    <option value="hasOne">hasOne</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <text style="color:red;">*</text>
                                关联字段</label>
                            <div class="layui-input-block">
                                <select class="layui-select" name="relation[field]" id="relationField">
                                    <option value="">请先选择关联表</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                显示字段</label>
                            <div class="layui-input-block">
                                <select class="layui-select" name="relation[show_field]" id="relationShowField">
                                    <option value="">请先选择关联表</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <text style="color:red;">*</text>
                                关联函数名</label>
                            <div class="layui-input-block">
                                <input type="text" name="relation[fun_name]" placeholder="请先选择关联表" class="layui-input"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="laytp-btn laytp-btn-primary laytp-btn-sm" lay-submit="" lay-filter="add">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="laytp-btn laytp-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</script>
<form class="layui-form" lay-filter="layui-form"></form>
<script>
    if(localStorage.getItem("staticDomain")){
        document.write("<link rel='stylesheet' href='" + localStorage.getItem("staticDomain") + "/component/laytp/css/laytp.css?v=" + localStorage.getItem("version") + "'>");
        document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/layui/layui.js?v=" + Date.now() + "'><\/script>");
        document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/laytp/layuiConfig.js?v=" + Date.now() + "'><\/script>");
    }else{
        document.write("<link rel='stylesheet' href='/static/component/laytp/css/laytp.css?v=" + localStorage.getItem("version") + "'>");
        document.write("<script src='/static/component/layui/layui.js?v=" + Date.now() + "'><\/script>");
        document.write("<script src='/static/component/laytp/layuiConfig.js?v=" + Date.now() + "'><\/script>");
    }
</script>
<script>
    var filedModulePath = '';
    if(localStorage.getItem("staticDomain")){
        filedModulePath = '../../../../../plugin/curd/js/field';
    }else{
        filedModulePath = '../../../../../static/plugin/curd/js/field';
    }
    layui.extend({
        field: filedModulePath
    }).use(['laytp','field'],function(){
        layui.laytpl($("#form").html()).render({table_id:layui.context.get("laytpDevtoolCurdTableId")},function(string){
            $("form").html(string);
            layui.laytpForm.render();
            layui.form.render();
        });

        layui.form.on('submit(add)', function(data){
            facade.ajax({
                route:'/plugin/curd/curd.field/add',
                data : data.field,
                contentType: "application/x-www-form-urlencoded"
            }).done(function(res){
                if(res.code === 0){
                    parent.layui.layer.close(parent.layui.layer.getFrameIndex(window.name));//关闭当前页
                    parent.layui.table.reloadData("field-table");
                }
            });
            return false;
        });
    })
</script>
</body>
</html>